<!DOCTYPE HTML>
<html>
<head>
<title>MLA Style Test</title>
<link type="text/css" rel="stylesheet" href="//frame.serverboy.net/latest/" />
<link type="text/css" rel="stylesheet" href="/styles/mla/mla.css" />
<style type="text/css">
	#paper {
		background:#fff;
		box-shadow: 0.2em 0.2em #CCC;
	}
</style>
<style type="text/css" media="screen">
	#paper {
		border:1px solid #444;
		margin-top:10px;
	}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="med sans-serif use-code">
<article id="paper">
	<header>
		Matt Basta<br />
		EN 103.4<br />
		Professor Beardsall<br />
		<time>20 September, 2009</time>
	</header>
	
	<h1>Paper Title</h1>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique metus ut sapien tempus pharetra. Praesent nec consectetur odio. Vestibulum purus nisl, condimentum ut volutpat tempor, viverra non sem. Vestibulum in purus eu dui gravida ultricies ac vel mi. Pellentesque ac urna tellus. Vivamus ac diam tellus. Maecenas est turpis, varius eget bibendum ut, lobortis non sapien. Nam porta ante sapien. Praesent a libero nisi. Nullam ligula lorem, vulputate ut porttitor vitae, dapibus eget sapien. Fusce tempus turpis vel risus sollicitudin sollicitudin.</p>
	<p>Morbi at lorem eu arcu rutrum elementum quis ut sapien. Etiam eget turpis dui, non interdum ante. Proin mollis feugiat odio rhoncus hendrerit. Nam vitae dolor lorem. Nunc ac varius nunc. In et est lacus, in suscipit metus. Nunc eget sapien ut eros elementum consectetur eu eu nisl. Integer dictum, turpis elementum semper facilisis, leo neque bibendum ante, ut ornare tellus tellus eget mauris. Quisque at lacus sed nulla ornare imperdiet eget id purus. In cursus laoreet dolor quis faucibus. Aliquam ullamcorper mollis mi placerat vehicula. Donec pretium dolor vitae dolor rutrum vitae consectetur orci pellentesque. Quisque congue, justo a porta vehicula, erat sem vulputate risus, vitae imperdiet neque lacus in diam. Vivamus eget nisi id enim convallis venenatis sed vitae odio. In et felis id eros pellentesque molestie. Integer nulla mauris, interdum ut porttitor pellentesque, lacinia rutrum nisl. Nunc pulvinar dapibus nisl. Curabitur tincidunt tempus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc gravida suscipit tellus, a lobortis nibh placerat quis.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique metus ut sapien tempus pharetra. Praesent nec consectetur odio. Vestibulum purus nisl, condimentum ut volutpat tempor, viverra non sem. Vestibulum in purus eu dui gravida ultricies ac vel mi. Pellentesque ac urna tellus. Vivamus ac diam tellus. Maecenas est turpis, varius eget bibendum ut, lobortis non sapien. Nam porta ante sapien. Praesent a libero nisi. Nullam ligula lorem, vulputate ut porttitor vitae, dapibus eget sapien. Fusce tempus turpis vel risus sollicitudin sollicitudin.</p>
	<p>Morbi at lorem eu arcu rutrum elementum quis ut sapien. Etiam eget turpis dui, non interdum ante. Proin mollis feugiat odio rhoncus hendrerit. Nam vitae dolor lorem. Nunc ac varius nunc. In et est lacus, in suscipit metus. Nunc eget sapien ut eros elementum consectetur eu eu nisl. Integer dictum, turpis elementum semper facilisis, leo neque bibendum ante, ut ornare tellus tellus eget mauris. Quisque at lacus sed nulla ornare imperdiet eget id purus. In cursus laoreet dolor quis faucibus. Aliquam ullamcorper mollis mi placerat vehicula. Donec pretium dolor vitae dolor rutrum vitae consectetur orci pellentesque. Quisque congue, justo a porta vehicula, erat sem vulputate risus, vitae imperdiet neque lacus in diam. Vivamus eget nisi id enim convallis venenatis sed vitae odio. In et felis id eros pellentesque molestie. Integer nulla mauris, interdum ut porttitor pellentesque, lacinia rutrum nisl. Nunc pulvinar dapibus nisl. Curabitur tincidunt tempus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc gravida suscipit tellus, a lobortis nibh placerat quis.</p>
	
	<hr />
	
	<section class="ghalf">
		This is the first column
		This is the first column
	</section>
	<section class="ghalf">
		This is the second column
		This is the second column
	</section>
	<div class="clear"></div>
	
	<section class="gthird">
		This is the first column
		This is the first column
	</section>
	<section class="gthird">
		This is the second column
		This is the second column
	</section>
	<section class="gthird">
		This is the third column
		This is the third column
	</section>
	<div class="clear"></div>
	
	<section class="gquarter">
		This is the first column
		This is the first column
	</section>
	<section class="gquarter">
		This is the second column
		This is the second column
	</section>
	<section class="gquarter">
		This is the third column
		This is the third column
	</section>
	<section class="gquarter">
		This is the last column
		This is the last column
	</section>
	<div class="clear"></div>
	
	<div class="g1">0.5</div>
	<div class="m1 g1">0.5</div>
	<div class="g2">0.5</div>
	<div class="g1">0.5</div>
	<div class="g1">0.5</div>
	<div class="g1">0.5</div>
	<div class="g1">0.5</div>
	<div class="g1">0.5</div>
	<div class="g1">0.5</div>
	<div class="g1">0.5</div>
	<div class="g1">0.5</div>
	<div class="clear"></div>
	
	<section>
		<h1>Other Formatting</h1>
		<p class="sampledata">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Maecenas pretium tempor neque. Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat.</p>
		<p class="sampledata">Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.</p>
		<p class="sampledata">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Maecenas pretium tempor neque. Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat. Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.</p>
		<h3>This is an H3</h3>
		<p class="sampledata">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Maecenas pretium tempor neque. Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat. Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.</p>
	</section>
	<p>This block quote is going to be citing a single paragraph. Notice that there are no indentations, because there is no paragraph (&lt;p&gt;) tag.</p>
	<blockquote>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.
	</blockquote>
	<p>The next block quote, however, cites multiple paragraphs. Note the extra half inch indentation. This is caused by the inclusion of paragraph tags.</p>
	<blockquote>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Aenean commodo tellus in turpis. Phasellus auctor justo.</p>
		<p>Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.</p>
	</blockquote>
	<p>Sometimes it is necessary to include tabular information in your document that pertains to the information at hand. This information is to be placed in a table close to your text. It should have a label, which you will refer to it by inline.</p>
	<p>Most doctors agree that smoking directly correlates with an increase in lung cancer among persons over the age of fifty (see table 2).</p>
	<figure>
		<dt>
			Table 2<br />
			Information that is referenced from the text.
			Source: <cite>Journal XYZ</cite>
		</dt>
		<dd>
			<table>
				<thead>
					<tr>
						<td colspan="2">Demo Information</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th>This is a header</th>
						<th>Another</th>
					</tr>
					<tr>
						<td>Item One</td>
						<td>Something else that's useful</td>
					</tr>
					<tr>
						<td>Item Two</td>
						<td>Something else that's useful</td>
					</tr>
					<tr>
						<td>Item Three</td>
						<td>Something else that's useful</td>
					</tr>
					<tr>
						<td>Item Four</td>
						<td>Something else that's useful</td>
					</tr>
				</tbody>
			</table>
		</dd>
	</figure>
	<h2>This is a Subheading</h2>
	<p class="sampledata">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Maecenas pretium tempor neque. Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat. Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.</p>
	<h5>This is an H5</h5>
	<figure>
		<figcaption>
			Fig. 4<br />
			Something vs. Something<br />
			Source: <cite>Some Book</cite>
		</figcaption>
		<img src="http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Test|Data" alt="Test data" />
	</figure>
	<p>Here is a clump of sample code-ish stuff. Make sure you have the <code>use-code</code> flag set on your body tag when you declare a page. If you don't, code will not look pretty! We make changes to spacing around <code>code</code> and <code>pre</code> elements, as well as apply nice native font families by default.</p>
<pre>
Twinkle twinkle little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle twinkle little star
How I wonder what you are
</pre>
	<p>Maybe you need to include a code block. No more do you have to settle for disgusting old markup. Now, you can use the power of Frame to include syntax highlighting! There's generic support for all of the major code constructs.</p>
<code><span class="cm">// This is a comment.</span>
<span class="cs">function</span> foo(<span class="v">$bar</span>) {
	<span class="cs">echo</span> <span class="v">$bar</span>, <span class="l">" is a pretty cool guy that "</span>;
}
</code>
	<p>Ordered and unordered lists are fun. You should be able to pop in and out of them without disturbing the grid. If you do, there's gonna be hell to pay. The grid is sacred, and Frame does its best to respect that.</p>
	<ol>
		<li>A standard list item.</li>
		<li>Another standard list item.</li>
		<li>
			A two-line list item.<br />
			This is the second line.
		</li>
		<li>
			<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
			<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
		</li>
		<li>
			<ol>
				<li>A standard list item.</li>
				<li>
					<p>Nesting is fun, but also sometimes necessary. To include text adjacent to a nested list, it must be encapsulated in a paragraph tag or other block-level element.</p>
					<ol>
						<li>Item 1</li>
						<li>Item 2</li>
					</ol>
				</li>
				<li>
					A two-line list item.<br />
					The second line.
				</li>
				<li>
					<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
					<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
				</li>
			</ol>
		</li>
	</ol>
	<ul>
		<li>A standard list item.</li>
		<li>Another standard list item.</li>
		<li>
			A two-line list item.<br />
			This is the second line.
		</li>
		<li>
			<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
			<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
		</li>
		<li>
			<ul>
				<li>A standard list item.</li>
				<li>
					<p>Nesting is fun, but also sometimes necessary. To include text adjacent to a nested list, it must be encapsulated in a paragraph tag or other block-level element.</p>
					<ol>
						<li>Item 1</li>
						<li>Item 2</li>
					</ol>
				</li>
				<li>
					A two-line list item.<br />
					The second line.
				</li>
				<li>
					<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
					<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
				</li>
				<li>
					<ul>
						<li>First</li>
						<li>Second</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	
	<p>There are also those weird times when you need a definition list. Why are you doing it in MLA format? I'm not really sure. But we're sure not going to let you hang there! So we gave you the DL element. Go ahead and use it. It makes pretty things happen.</p>
	
	<dl>
		<dt>A term</dt>
		<dd>The corresponding definition</dd>
		<dt>Another term</dt>
		<dd>
			<p>This is going to be what I like to call a really really long multi-paragraph definition...which is appropriate, because it's a definition list. Everybody loves definition lists.</p>
			<p>This is going to be what I like to call a really really long multi-paragraph definition...which is appropriate, because it's a definition list. Everybody loves definition lists.</p>
		</dd>
	</dl>
	
	<section>
		<h1>Formatting</h1>
		<p class="sampledata">Lorem ipsum dolor sit amet, consectetur adipiscing <abbr title="test">TEST</abbr>. Aenean id tellus condimentum leo mattis condimentum. Maecenas pretium tempor neque. Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat. Aenean commodo tellus in turpis.</p>
		<p class="sampledata"><b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing. <i>Aenean id tellus</i> condimentum leo mattis condimentum. <strong>Maecenas pretium</strong> <em>tempor neque</em>. <small>Donec non erat lacinia nibh pretium lobortis.</small> Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat. Aenean commodo tellus in turpis.</p>
		<p><dfn>HTML-ology</dfn> is the study of HTML. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.</p>
		<p>The computer's strange output resulting in a <samp>HYPERTEXT TRANSFER</samp> message. This was the 1<sup>st</sup> time that this error was found to be present. This could be observed by x<sub>1</sub>'s value through the course of the experiment. The user should enter <kbd>wget http://frame.serverboy.net/latest/</kbd> to retrieve the latest version.</p>
	</section>
</article>
<script type="text/javascript">
<!--
var paper;
if(paper=document.getElementById("paper")) {
	var overflow = document.createElement("div");
	overflow.id = "print_overflow";
	paper.parentNode.insertBefore(overflow, paper);
	paper.parentNode.removeChild(paper);
	if(document.all) {
		
		var codes = paper.getElementsByTagName('code');
		for(var i=0;i<codes.length;i++) {
			var code = codes[i];
			code.innerHTML = code.innerHTML.replace(/\n/g, "<br />");
		}
		
		/**/
		var paper_replacement = document.createElement("div");
		paper_replacement.innerHTML = paper.innerHTML;
		paper = paper_replacement;
		paper.id = "paper";
		/**/
	}
	overflow.appendChild(paper);
}
-->
</script>
</body>
</html>